import React, { Component } from 'react'
import * as layout from '../../configs/layout'
import * as color from '../../configs/color'

const lineStyle = {
    marginLeft: layout.HORIZONTAL_PADDING,
    paddingRight: layout.HORIZONTAL_PADDING,
    paddingTop: '16px',
    paddingBottom: '16px',
    marginTop: '16px',
    marginBottom: '16px',
    borderTop: '1px solid #E3E8E8',
    borderBottom: '1px solid #E3E8E8',
    lineHeight: '20px'
}

const labelStyle = {
    display: 'inline-block',
    color:'#666666',
    width: '120px'
}

const contentStyle = {
    display: 'inline-block',
    wordBreak: 'break-all'
}

export default class TextLine extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <li className="flex-h flex-vc" style={lineStyle}>
                <span style={labelStyle}>{this.props.label}</span>
                <span className="flex1" style={contentStyle}>{this.props.content}</span>
            </li>
        )
    }
}

TextLine.propTypes = {
    label: React.PropTypes.string.isRequired,
    content: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number
    ])
}